<template>
	<view>
		<!-- <view class="search bg-white u-flex u-p-30">
			<u-search 
				class="u-flex-1"
				placeholder="请输入关键词" 
				v-model="key" 
				:clearabled="true" 
				:show-action="true" 
				action-text="搜索" 
				:animation="true"
				shape="square"
				@change="getRecoveryOrder(true)"
				@search="getRecoveryOrder(true)">
			</u-search>
		</view> -->
		<list-filter-panel ref="filterPanel" @filter-change="filterChange"></list-filter-panel>
		<!-- 条件筛选 -->
		<!-- <filter-panel
			:filters="[]"
			:defaultValue="[{key: 'timeType',default: 3}]"
			@filter-change="filterChange"
		></filter-panel> -->
		<view class="ac-head">
			<text class="u-font-24 u-tips-color">{{timeName}}回收统计</text>
		</view>
		<view class="grid-box u-m-t-0">
			<view class="lower-level u-m-t-0">
				<view class="cell">
					<view class="cell-t">回收重量(KG)</view>
					<view class="cell-b">
						<text class="number">{{recoveryOrderData.countweight}}</text>
					</view>
					<!-- <view>
						<text class="tips-txt">{{ storeDetailsKG.length }}种类型</text>
					</view> -->
				</view>
				<view class="divider"></view>
				<view class="cell">
					<view class="cell-t">回收数量(件)</view>
					<view class="cell-b">
						<text class="number">{{recoveryOrderData.countquantity}}</text>
					</view>
					<!-- <view>
						<text class="tips-txt">{{ storeDetailsNum.length }}种类型</text>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 回收类别统计 -->
		<view class="main u-m-b-30">
			<view class="grid-box" v-for="(cell,key) in recoveryOrderData.list" :key="key">
				<view><text class="u-font-36" style="font-weight: bold;">{{key}}</text></view>
				<view class="progress-box on">
					<view class="progress-item" v-for="(item,index) in cell" :key="item.id">
						<view class="u-flex" style="line-height: 1em;">
							<view class="u-flex-1 name">{{item.productname}}</view>
							<view class="number"><text class="u-font-32">{{item.weight}}</text><text class="u-font-24">{{item.isweighing == false?'件':'KG'}}</text></view>
						</view>
						<view class="u-flex u-p-b-10">
							<view class="u-flex-1" v-if="item.isweighing">
								<u-line-progress :striped="true" :percent="percent(item.weight,recoveryOrderData.countweight)" :striped-active="true" :show-percent="false" :height="20" active-color="#10beca"></u-line-progress>
							</view>
							<view class="u-flex-1" v-else>
								<u-line-progress :striped="true" :percent="percent(item.weight,recoveryOrderData.countquantity)" :striped-active="true" :show-percent="false" :height="20" active-color="#10beca"></u-line-progress>
							</view>
							<!-- <text class="u-tips-color u-font-24 u-p-l-20">{{percent(item.weight,form.store.countquantity)}}%</text> -->
						</view>
						<view class="u-flex" style="line-height: 1em;">
							<text class="u-tips-color u-font-24 u-flex-1" v-if="item.isweighing">占总重量比例<text class="u-font-bold">{{percent(item.weight,recoveryOrderData.countweight)}}</text>%</text>
							<text class="u-tips-color u-font-24 u-flex-1" v-else>占总件数比例<text class="u-font-bold">{{percent(item.weight,recoveryOrderData.countquantity)}}</text>%</text>
							<!-- <text class="u-tips-color u-font-24">
								<text class="u-p-r-5">查看详细数据</text>
								<text class="iconfont icon-youjiantou u-font-24"></text>
							</text> -->
						</view>
					</view>
				</view>
			</view>
			<view v-if="recoveryOrderData.list.length == 0" class="u-h-500">
				<u-empty text="没有查到相关数据" mode="search"></u-empty>
			</view>
		</view>
		

		<!-- 底部菜单 -->
		<!-- <tabbar :current="1"></tabbar> -->

		<!-- 弹出时间范围选择 -->
		<u-calendar v-model="showCalendar" mode="range" active-bg-color="rgb(16,190,202)"
			range-bg-color="rgba(16,190,202,0.13)" range-color="rgb(16,190,202)" @change="calendarDate"></u-calendar>
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar/tabbar.vue'

	export default {
		components: {
			tabbar
		},
		data() {
			return {
				key: '',
				// 弹出时间范围选择
				showCalendar: false,
				// 时间类型
				timeType: 1, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
				startDate: '', //开始时间
				endDate: '', //结束时间
				recoveryOrderData: {
					countweight: 0,
					countquantity: 0,
					list: []
				},
				timeName: '今日'
			}
		},
		onLoad() {
			this.getRecoveryOrder()

			// this.$u.post('/Statistics/Brother/Recovery',{
			// 	"dateType": 0,
			// 	"startDate": "",
			// 	"endDate": ""
			// }).then((res)=>{

			// })
		},
		mounted() {
			// this.$refs.filterPanel.choose({
			// 	label: '今日',
			// 	value: 1,
			// 	check: false
			// },'timeOptions','timeType')
			console.log('this.$refs.filterPanel',this.$refs.filterPanel.timeOptions)
			this.$refs.filterPanel.timeOptions.find((item)=>item.value == 0).check = false
			this.$refs.filterPanel.filterValues.timeType = 1
			this.$refs.filterPanel.timeOptions.find((item)=>item.value == 1).check = true
		},
		methods: {
			filterChange(obj){
				console.log('filterChange',obj)
				for(let key in obj){
					this.$set(this,key,obj[key])
				}
				switch (this.timeType){
					case 0:
						this.timeName='全部'
						break;
					case 1:
						this.timeName='今日'
						break;
					case 2:
						this.timeName='昨日'
						break;
					case 3:
						this.timeName='本月'
						break;
					case 4:
						this.timeName='上月'
						break;
					case 5:
						this.timeName='本季度'
						break;
					case 6:
						this.timeName='本年'
						break;
					case 7:
						this.timeName='本年'
						break;
					case 8:
						this.timeName='上年'
						break;
					default:
						this.timeName=`${this.startDate}-${this.endDate}`
						break;
				}
				this.noMore = false;
				this.getRecoveryOrder(true);
			},
			// 获取数据
			getRecoveryOrder() {
				this.$u.post('/Statistics/Brother/Recovery', {
					"timeType": this.timeType,
					"startDate": this.startDate,
					"endDate": this.endDate,
					"key": this.key
				}).then((res) => {
					// let ArrayData = []
					// res.deliver?.details.forEach((item) => {

					// })
					this.recoveryOrderData.countweight = res.deliver.countweight
					this.recoveryOrderData.countquantity = res.deliver.countquantity
					this.recoveryOrderData.list = this.groupByTypename(res.deliver?.details)
					// this.$set(this.recoveryOrderData,'list',this.groupByTypename(res.deliver?.details))
					console.log('this.recoveryOrderData.list',this.recoveryOrderData.list)
				})
			},
			groupByTypename(data) {
				return data
					.filter(item => item.weight > 0)  // 先过滤
					.reduce((acc, item) => {
					const key = item.typenames;

					// 如果分组不存在则创建新组
					if (!acc[key]) {
						acc[key] = [];
					}

					// 将当前项加入对应分组
					acc[key].push(item);
					
					// 对每个分组进行排序
					acc[key].sort((a, b) => b.weight - a.weight);

					return acc;
				}, {});
			},
			percent(weight,count) {
				let total = count
				if (total > 0) {
					return Number((weight / total * 100).toFixed(2))
				} else {
					return 0
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ac-head{
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}
		
	.time-select {
		background-color: #fff;
		text-align: center;
		padding: 16rpx 0;

		.button-item {
			width: 160rpx;
			background-color: $u-color-main;
			height: 120rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.lower-level{
		display: flex;
		margin-top: 30rpx;
		.number{
			font-size: 42rpx;
			font-weight: bold;
			color: #000;
		}
		.cell {
			padding: 10px 0;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			text-align: center;
			background-color: $u-bg-color;
			flex: 1;
			.cell-t{
				margin-bottom: 10rpx;
			}
		}
		
		.divider {
			height: 80rpx;
			background-color: #fff;
			margin: 0 10rpx;
		}
	}
	
	// 条形进度条显示
	.progress-box{
		.progress-item:nth-child(1),.progress-item:nth-child(2),.progress-item:nth-child(3),.progress-item:nth-child(4),.progress-item:nth-child(5){
			height: initial!important;
			border-bottom: 1px dashed #f1f1f1!important;
			padding-bottom: 20rpx!important;
			padding-top: 20rpx!important;
		}
		&.on{
			>.progress-item{
				height: initial!important;
				border-bottom: 1px dashed #f1f1f1!important;
				padding-bottom: 20rpx!important;
				padding-top: 20rpx!important;
			}
		}
		
		.progress-item {
			border-bottom: 1px dashed #f1f1f1;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
			transition: all 0.3s;
			height: 0;
			overflow: hidden;
			padding: 0;
			border: 0;
			
			.name {
				font-size: 32rpx;
			}
	
			.number{
				font-weight: inherit!important;
			}
		}
	}
</style>